<template>
    <div class="content">
        <van-row>
            <van-col span="2">
                <van-icon name="bars" size="30px" style="margin-left: 4px; margin-top: 8px;" />
            </van-col>
            <van-col span="20">
                <van-search v-model="keyword" placeholder="请输入搜索关键词" input-align="center" shape="round" />

            </van-col>
            <van-col span="2">
                <van-icon name="qq" size="30px" style="margin-top: 8px;" />
            </van-col>
        </van-row>
        <!--商品轮播-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="item in productData" :key="item">
                <img :src="item" width="100%" height="230" />
            </van-swipe-item>
        </van-swipe>
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

        <!--div构建icon快捷入口 加入轮播-->
        <div class="iconitem">
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item>
                    <van-grid :column-num="5" :border="false" icon-size="40px">
                        <van-grid-item v-for="value in iconData" :key="value.id" :icon="value.img" :text="value.text" />
                    </van-grid>

                </van-swipe-item>
                <van-swipe-item>
                    <van-grid :column-num="5" :border="false" icon-size="45px">
                        <van-grid-item v-for="item in iconData2" :key="item.id" :icon="item.img" :text="item.text" />
                    </van-grid>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="mstebal">
            <van-row>
                <van-col span="5" style="text-align: center; margin-top: 10px;">
                    <div class="mst">
                        <img src="https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png"
                            width="90%" height="16" />
                    </div>
                    <div style="color: white; ">限时抢购</div>
                    <p style="color: white;">去抢购</p>
                </van-col>
                <van-col span="19">
                    <div class="productCss">
                        <van-grid :column-num="4" :border="false" icon-size="50px">
                            <van-grid-item v-for="value in msproduct" :key="value.id" :icon="value.img"
                                :text="value.price" />
                        </van-grid>

                    </div>
                </van-col>

            </van-row>

        </div>
    </div>
    <hr style="color: #f5f3f3;">
    <!--商品详情-->
    <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="item in productList" style="margin-bottom: 60px;" 
        :to="{name:'malldetail',query:{id:item.id}}">
            <van-image width="100%" height="100%"
                :src="item.productImage.replace('/profile', 'http://www.hphs.com')" />

            <div>{{item.productName}}</div>
            <div class="prices"><em>￥</em><span style="font-size: 23px;">{{ item.productSalePrice }}</span>.00</div>
        </van-grid-item>

    </van-grid>




    <van-tabbar v-model="active">
        <van-tabbar-item icon="shop">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster" :to="({name:'mallcate'})">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-circle">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { listProduct } from '@/api/product/product'
const active = ref(0)
const keyword = ref('')
const productData = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])
//快捷键图标
const iconData = ref([
    { id: '101', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', text: '华杉超市' },
    { id: '102', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png', text: '华杉众筹' },
    { id: '103', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: '服饰美妆' },
    { id: '104', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', text: '充值中心' },
    { id: '105', img: '//img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: 'PLUS会员' },
])
const iconData2 = ref([
    { id: '101', img: 'https://m.360buyimg.com/babel/jfs/t20270715/22456/27/20943/10381/6694ee81F684396bb/0ba51f592d28dfdd.png', text: '华杉生鲜' },
    { id: '102', img: 'https://img11.360buyimg.com/babel/jfs/t20270715/29760/28/21267/11992/6694eea3F0fe3dca2/d5672661722bfc42.png', text: '华杉国际' },
    { id: '103', img: 'https://img11.360buyimg.com/babel/jfs/t20270715/29760/28/21267/11992/6694eea3F0fe3dca2/d5672661722bfc42.png', text: '商品拍卖' },
    { id: '104', img: 'https://img11.360buyimg.com/babel/jfs/t20270715/29760/28/21267/11992/6694eea3F0fe3dca2/d5672661722bfc42.png', text: '充值中心' },
    { id: '105', img: 'https://img11.360buyimg.com/babel/jfs/t20270715/29760/28/21267/11992/6694eea3F0fe3dca2/d5672661722bfc42.png', text: 'PLUS会员' },
])

//秒杀的商品数组
const msproduct = ref([
    { id: 100, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/267875/38/3915/124902/676e1ca7Fc68e6263/2cc435c770fee320.jpg', price: '￥' + 1998 },
    { id: 101, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/243742/18/946/134631/658bb713F26d1945b/09ee83fe42ea3df7.png', price: '￥' + 9.8 },
    { id: 102, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/243742/18/946/134631/658bb713F26d1945b/09ee83fe42ea3df7.png', price: '￥' + 19.8 },
    { id: 103, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/243742/18/946/134631/658bb713F26d1945b/09ee83fe42ea3df7.png', price: '￥' + 29.8 },
])

const productList = ref([])

onMounted(() => { 
    CallProductApi()
})
//构建api接口函数
const CallProductApi = () => { 
    listProduct().then(res => { 
        console.log(res);
        productData.value = res.data.map((item) => { 
            return item.productImage.replace('/profile','http://www.hphs.com')
        })
        //截取前4个
        productData.value = productData.value.slice(0, 4)

        //过滤掉下架的商品
        const items = res.data.filter((item) => { 
            if (item.productStatus === 1) { 
                return item
            }
        }) 
        console.log(items);
        //秒杀商品赋值
        msproduct.value = items.map((item) => { 
            return {
                id: item.id,
                img: item.productImage.replace('/profile', 'http://www.hphs.com'),
                price: '￥' + item.productSalePrice
            }
        })
        // 截取数据
        msproduct.value = msproduct.value.slice(1, 5)
        //商品的赋值：
        productList.value = items
    })
}

</script>

<style scoped>
.content {
    width: 100%;
    height: 70%;
    background-color: #dbd9d9;
}

.van-search {
    background-color: #dbd9d9;
    height: 50px;
}

.iconitem {
    width: 98%;
    height: 90px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 5px;
    margin-left: 4px;
}

.mstebal {
    width: 98%;
    height: 103px;
    /* background-color: rgb(175, 6, 6); */
    background: url('https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    border-radius: 8px;
    /* margin-bottom: 5px; */
    margin-left: 4px;

    .productCss {
        background-color: white;
        height: 98px;
        width: 99%;
        margin-top: 2px;
        margin-left: 1px;
        border-radius: 8px;
    }

    :deep(.van-grid-item__content) {
        border-radius: 10px !important;
        height: 98px !important;
       
    }
        :deep(span) {
            color: red !important;
            font-weight: 800;
        }
}

.van-swipe {
    :deep(.van-grid-item__content) {
        background-color: white;
        opacity: 0.6;
    }
}

.prices {
    color: red;
    position: relative;
    left: -50px;
    top: 5px;
}
</style>
